<template>
  <div class="app-container">
    <el-form-item label="管控措施:" label-width="140px">
      <el-tree-select
        v-model="riskMeasureId"
        check-strictly
        multiple
        :data="measureClassFyOptions"
        ref="measureSelect"
        :props="{
          value: 'id',
          label: 'label',
          children: 'children',
          disabled: 'disabled',
        }"
        value-key="classfyId"
        node-key="classfyId"
        placeholder="请选择管控措施内容"
        @node-click="clickMeasureNode"
        filterable
      >
        <template class="custom-tree-node" #default="{ node, data }">
          <div
            style="
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              width: 100%;
            "
          >
            <span style="padding-left: 4px">{{ node.label }}</span>
          </div>
        </template>
      </el-tree-select>
    </el-form-item>

    <div data-3d="true">
      <h2>.loader-road</h2>
      <div class="loader-road"></div>
    </div>
  </div>
</template>
<script setup>
import { getMeasureAndClassFyTree } from "@/api/prevent/risk/classfy";
const { proxy } = getCurrentInstance();
const riskMeasureId = ref();
const measureClassFyOptions = ref([]);
const measureSelect = ref(null);
/** 获取管控措施类型列表数据 */
function getRiskMeasureClassfyList() {
  getMeasureAndClassFyTree().then((res) => {
    console.log(res.data);
    measureClassFyOptions.value = res.data;
  });
}

function clickMeasureNode(data, node, TreeNode, event) {
  if (data.nodeLevel == "1") {
    proxy.$modal.msgError("管控措施类型不允许选择");
    //setCurrentNodes(null);
    proxy.$refs.measureSelect.setCheckedKeys([1, 2], false);
  }

  //console.log(proxy.$refs);
}
onBeforeRouteLeave((to, from, next) => {
  proxy.$modal.confirm("请离开页面前提交好数据，否则数据将会丢失！！！").then(() => {
    next();
  });
});
getRiskMeasureClassfyList();
</script>
<style scoped lang="scss">
[class*="loader"] {
  position: relative;
  top: 40%;
  display: inline-block;
  margin: 0 auto;
  cursor: wait;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
div[data-3d] {
  perspective: 600px;
}

.loader-road {
  font-size: 0.66em;
  z-index: 1;
  top: 45%;
  width: 4em;
  height: 28em;
  border-style: solid;
  border-width: 0 0.2em;
  color: #0e5f76;
  background-color: rgba(8, 61, 86, 0.2);
  transform-style: preserve-3d;
  transform: rotateX(87deg);
  transform-origin: center top;
}
.loader-road:before,
.loader-road:after {
  content: "";
  position: absolute;
}
.loader-road:before {
  content: "--------";
  white-space: pre;
  line-height: 0.5;
  width: 0.2em;
  left: 1.8em;
  z-index: 0;
  top: 0;
  bottom: 0;
  text-indent: -1.75em;
  font-weight: bold;
  background-image: repeating-linear-gradient(
    to bottom,
    #0e5f76 0em,
    #0e5f76 2em,
    transparent 2.01em,
    transparent 4em
  );
  background-size: 2em 4em;
  background-position: 0 0;
  -webkit-animation: middleTrack 1s linear infinite, middleTrackText 8s linear infinite;
  animation: middleTrack 1s linear infinite, middleTrackText 8s linear infinite;
}
.loader-road:after {
  font-size: 0.5em;
  content: "loading";
  line-height: 1.2;
  border: 0.2em solid #0e5f76;
  color: #19a6cf;
  border-width: 0.2em 0.2em 0;
  height: 3.75em;
  z-index: 2;
  top: 0;
  left: -0.2em;
  right: -0.2em;
  border-radius: 1em 1em 0 0;
  box-shadow: inset 0 1em 0 rgba(8, 30, 63, 0.5), inset 0 1.2em 0 #0e5f76;
  transform-origin: center bottom;
  transform: rotateX(-87deg) translateZ(-1px);
  -webkit-animation: highwaySign 5s linear infinite;
  animation: highwaySign 5s linear infinite;
}

@-webkit-keyframes middleTrackText {
  0%,
  50.1%,
  100% {
    padding-top: 0;
  }
  50% {
    padding-top: 27em;
  }
}

@keyframes middleTrackText {
  0%,
  50.1%,
  100% {
    padding-top: 0;
  }
  50% {
    padding-top: 27em;
  }
}
@-webkit-keyframes middleTrack {
  to {
    background-position: 0 8em;
  }
}
@keyframes middleTrack {
  to {
    background-position: 0 8em;
  }
}

@-webkit-keyframes highwaySign {
  0% {
    transform: rotateX(-87deg) translateZ(0) translateY(0em);
    opacity: 0;
    filter: blur(0.25em);
  }
  10% {
    opacity: 1;
    filter: blur(0.1em);
  }
  80% {
    transform: rotateX(-87deg) translateZ(53em) translateY(2.7em);
    opacity: 1;
    filter: blur(0em);
  }
  81% {
    opacity: 0;
    transform: rotateX(-87deg) translateZ(53.1em) translateY(2.7em);
  }
  100% {
    opacity: 0;
    transform: rotateX(-87deg) translateZ(0em) translateY(0em);
  }
}
@keyframes highwaySign {
  0% {
    transform: rotateX(-87deg) translateZ(0) translateY(0em);
    opacity: 0;
    filter: blur(0.25em);
  }
  10% {
    opacity: 1;
    filter: blur(0.1em);
  }
  80% {
    transform: rotateX(-87deg) translateZ(53em) translateY(2.7em);
    opacity: 1;
    filter: blur(0em);
  }
  81% {
    opacity: 0;
    transform: rotateX(-87deg) translateZ(53.1em) translateY(2.7em);
  }
  100% {
    opacity: 0;
    transform: rotateX(-87deg) translateZ(0em) translateY(0em);
  }
}
</style>
